<template>
    <el-drawer v-model="audioStore.isDrawShow" :with-header="false">
        <h2>播放列表</h2>
        <el-divider />
        <el-table @row-click="handleRowClick" :data="audioStore.listOfSong" style="width: 100%">
            <el-table-column type="index" label="序号" width="120" />
            <el-table-column prop="introduction" label="专辑" width="200" />
            <el-table-column prop="name" label="歌名" width="200" />
        </el-table>
    </el-drawer>
</template>

<script setup name="drawe">
import { useAudioStore } from '@/store/audio';
const audioStore = useAudioStore()
import { audioMixin } from '@/mixins/index.js'

//混入
defineOptions({
    mixins: [audioMixin],
});

function handleRowClick(row) {
    // 获取该行的索引值
    const index = audioStore.listOfSong.findIndex(item => item === row);
    console.log('点击的行数据:', row);
    // 你可以在这里进行你的操作，例如调用播放方法
    audioMixin.methods.toPlay(row.id, row.url, row.pic, row.name, row.singerId, row.lyric, index)
}
</script>

<style scoped></style>
